<template>

    <!-- <div class="search"> -->
    <ul class="ul" style="display:flex;flex-wrap: wrap;flex-direction:row">
        <li>
           <span>姓名</span>
          <el-input v-model="name" style="width:200px" placeholder="请输入姓名"></el-input>
        </li>
       <li>
         <span>性别:</span>
         <el-select v-model="sex">
           <el-option v-for="(s,index) in sexArr" :key="index"  :value="s.value" :label="s.label"></el-option>
         </el-select>
       </li>
        <li>
          <el-button type="primary" icon="Search" @click="search">查询</el-button>
          <el-button type="info" @click="MoreQueries=true">更多查询</el-button>
          <el-button type="danger"  @click="empty">清空</el-button>
          <el-button type="danger"  @click="selectL">批量禁用</el-button>
          <el-button type="primary" @click="enabled">批量启用</el-button>
        </li>
    </ul>

  <el-dialog  title="更多查询" v-model="MoreQueries"  width="500px" >
          <el-row style="text-align: center; margin-bottom: 20px;" >
            <el-col :span="12">
              <el-input v-model="name" style="width:200px" placeholder="请输入姓名"></el-input>
            </el-col>
            <el-col :span="12">
              <el-select style="width:200px" placeholder="请选择性别" v-model="sex">
                <el-option v-for="(s,index) in sexArr" :key="index"  :value="s.value" :label="s.label"></el-option>
              </el-select>
            </el-col>
          </el-row>
            <el-row style="text-align: center; margin-bottom: 20px;" >
            <el-col :span="12">
              <el-input v-model="phone" style="width:200px" placeholder="请输入电话"></el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="email" style="width:200px" placeholder="请输入邮箱" />
            </el-col>
          </el-row>

          <el-row style="text-align: center; margin-bottom: 20px;">
            <el-col :span="12">
              <el-select style="width:200px;height: 30px;" v-model="role"  class="m-2" placeholder="请选择角色" size="default">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select></el-col>
            <el-col :span="12">
              <el-select placeholder="请选择状态" v-model="state"  style="width:200px">
                <el-option v-for="(s,index) in stateArr" :key="index" :value="s.value" :label="s.label"></el-option>
              </el-select>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 20px;text-align: center">
            <el-col :span="24">
              <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始时间"
                              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
            </el-col>

          </el-row>

        <el-row  style="margin-bottom: 20px;text-align: center">
          <el-col :span="12"> <el-button type="primary" icon="Search" @click="search">确定</el-button></el-col>
          <el-col :span="12"><el-button type="danger"  @click="empty">取消</el-button></el-col>
        </el-row>
  </el-dialog>



    <!-- </div> -->

<!--    <el-dialog v-model="dialogFormVisible" title="新增">-->
<!--        <el-form :model="form">-->
<!--            <el-form-item label="姓名" :label-width="formLabelWidth">-->
<!--                <el-input v-model="form.name" autocomplete="off" />-->
<!--            </el-form-item>           -->
<!--            <el-form-item label="电话" :label-width="formLabelWidth">-->
<!--                <el-input v-model="form.phone" autocomplete="off" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="性别" :label-width="formLabelWidth">-->
<!--                <el-select v-model="form.sex" placeholder="请选择性别">-->
<!--                <el-option label="男" value="1" />-->
<!--                <el-option label="女" value="0" />-->
<!--                </el-select>-->
<!--            </el-form-item>-->
<!--        </el-form>-->
<!--        <template #footer>-->
<!--            <span class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible = false">关闭</el-button>-->
<!--                <el-button type="primary"  @click="dialogFormVisible = false;adduser()"-->
<!--                >提交</el-button-->
<!--                >-->
<!--            </span>-->
<!--        </template>-->
<!--  </el-dialog>-->

    <!-- 前台用户表格 -->
    <el-table ref = "multipleTable " @selection-change="getselect" :key="randomKey" @cell-dblclick="editData" v-loading.fullscreen="loading" element-loading-text="玩命加载中..."
        :data="tableData" style="width: 100%;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userId" label="编号" />
        <el-table-column label="姓名" property="userName">
            <!-- <template v-slot="scope">
                <el-input v-if="scope.row[scope.column.property + 'isShow']" :ref="scope.column.property"
                    v-model="scope.row.userName" @blur="blur(scope.row, scope.column)" @change="alterData(scope.row, scope.column)"></el-input>
                <span v-else>{{ scope.row.userName }}</span>
            </template> -->
        </el-table-column>
        <el-table-column prop="sex" :formatter="sexFormat" label="性别" />
        <el-table-column label="角色" property="role" />
        <el-table-column label="电话" property="phone">
            <!-- <template v-slot="scope">
                <el-input v-if="scope.row[scope.column.property + 'isShow']" :ref="scope.column.property"
                    v-model="scope.row.phone" @blur="blur(scope.row, scope.column)" @change="alterData(scope.row, scope.column)"></el-input>
                <span v-else>{{ scope.row.phone }}</span>
            </template> -->
        </el-table-column>
        <el-table-column label="邮箱" property="email">
            <!-- <template v-slot="scope">
                <el-input v-if="scope.row[scope.column.property + 'isShow']" :ref="scope.column.property"
                    v-model="scope.row.email" @blur="blur(scope.row, scope.column)" @change="alterData(scope.row, scope.column)"></el-input>
                <span v-else>{{ scope.row.email }}</span>
            </template> -->
        </el-table-column>
        <el-table-column prop="createTime" :formatter="timeFormat" label="注册时间" />
        <el-table-column prop="isDel" v-slot="scope" label="操作">
<!--             <el-button type="info" @click="dialogFormVisible=true;userdata=scope.row">修改</el-button>-->
            <el-button  :type="scope.row.isDel==1?'primary':'info'" @click="del(scope.row, scope.$index)">{{scope.row.isDel==1?'已启用':'已禁用'}}</el-button>
        </el-table-column>

    </el-table>
    <el-pagination style="margin-top:30px" background layout="prev, pager, next" :page-sizes="[2, 4, 6, 8]"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:page-size="size"
        v-model:current-page="curr" class="mt-4" />

<!--  <div>-->
<!--    <el-dialog v-model="dialogFormVisible" title="修改信息" width="400px">-->
<!--      <register-admin  :userData="userdata"></register-admin>-->
<!--    </el-dialog>-->
<!--  </div>-->
</template>

<script >
import moment from 'moment';
import { ElMessage } from 'element-plus'
export default {

    data() {
        return {
            userdata:'',
            ids:'',
            tableData: [],
            curr: 1,
            size: 10,
            total: 0,
            loading: false,
            randomKey: Math.random(),
            role: '',
            phone: '',
            name: '',
            stateArr:[{value:'1',label:'已启用'},{value: '0',label:"已禁用"}],
            sexArr:[{value:'1',label:'男'},{value: '0',label:"女"}],
            isSelect:false,
            sex:'',
            state:'',
            email:'',
            dialogFormVisible: false,
            MoreQueries:false,
            dialogTableVisible: false,
            formLabelWidth: '140px',
            type: 'primary'
            ,
            form: {
                name: '',
                password: '',
                phone: '',
                sex: '',

            },
            options: [

                {
                    value: '用户',
                    label: '用户'
                },
                {
                    value: 'VIP用户',
                    label: 'VIP用户'
                }
            ],

            time: [],
        }
    },
    watch: {
        time(value) {
            if (value == null) {
                this.time = []
            }
        }
    },
    methods: {

        sexFormat(row) {
            if (row.sex === 0) {
                return '女'
            } else {
                return '男'
            }

        },
        timeFormat(row) {
            return moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
        },
        //获取数据接口
        getData() {
            this.loading = true
            this.axios.get('api/user/selectUser', {
                params: {
                    curr: this.curr,
                    size: this.size,
                    role: this.role,
                    phone: this.phone,
                    name: this.name,
                    startTime: this.time[0],
                    endTime: this.time[1],
                    sex:this.sex,
                    email:this.email,
                    state:this.state
                }
            }).then((rs) => {
                this.tableData = rs.data.data;
                this.total = rs.data.total
                this.loading = false
            }).catch((error) => {
                this.loading = false
                console.log(error)
            })
        },
        //数据条数改变后
        handleSizeChange() {
            this.getData();
        },
        //当前页改变后
        handleCurrentChange() {
            this.getData();
        },
        editData(row, column) {
            row[column.property + "isShow"] = true
            //refreshTable是table数据改动时，刷新table的
            this.refreshTable()
            this.$nextTick(() => {
                this.$refs[column.property] && this.$refs[column.property].focus()
            })

        },
        //焦点离开时
        blur(row, column) {
            row[column.property + "isShow"] = false
        }
        ,
        alterData(row, column) {
            // console.log(row.userName)       
            row[column.property + "isShow"] = false
            this.refreshTable()
            this.axios.put('api/user/updateUser', {
                userId: row.userId,
                userName: row.userName,
                phone: row.phone,
                email: row.email
            }).then((rs) => {
                ElMessage({
                    title: '提示',
                    message: '修改成功',
                    type: 'success',

                })

            })
        },
        refreshTable() {
            this.randomKey = Math.random()
        },
      /**
       * 当多选框被选中时
       * @param selection
       */
      getselect(selection){
        //获取到选中行的用户id，转成字符串
        this.ids=selection.map(item=>item.userId)+'';
      },
      /**
       * 批量停用
       *
       *
       */
      selectL () {
          this.axios.delete('api/user/deleteUsers/',{params:{
              ids:this.ids,
            }}).then((rs)=>{
              console.log(rs)
              if(rs.data.code==200){
                  ElMessage.success("禁用成功!")
                  this.getData();
              }
          })

      }
      /**
       * 批量启用
       *
       *
       */
      ,enabled(){
        this.axios.delete('api/user/enabled/',{params:{
            ids:this.ids,
          }}).then((rs)=>{
          console.log(rs)
          if(rs.data.code==200){
            ElMessage.success("启用成功!")
            this.getData();
          }
        })
      },
      /**
       * 禁用单个
       * @param row
       */
        del(row) {
            this.axios.delete('api/user/deleteUser/',{
              params:{
                id:row.userId,
                state:!row.isDel==false?0:1
              }
            })
                .then((rs) => {
                    this.refreshTable();
                    if(!row.isDel==false){
                      ElMessage.success('禁用成功!')
                    }else{
                      ElMessage.success('启用成功!')
                    }
                    //重新加载数据
                    this.getData()
                })
        }, search() {
            this.getData()
            this.MoreQueries=false
        },
        // adduser() {
        //     // this.axios.post()
        //     console.log(this.form)
        // },
        // updateUser(row) {
        //     this.dialogFormVisible = true
        //     this.form.name = row.userName
        //     // this.form.
        // },
      /**
       * 点击清空后，将所有属性置为空
       */
        empty() {
            this.name = '',
                this.role = '',
                this.phone = '',
                this.time = [],
                this.sex='',
                this.email='',
                this.state=''
                this.MoreQueries=false;
                this.getData()
        }



    },
    created() {
        this.getData();
    }
}
</script>

<style>
#MoreQueries .el-row{

}
.ul li:last-child .el-button {
    width:80px
}
.ul li{
    /* border:1px solid; */
    list-style-type:none;
    margin-bottom: 20px;
    margin-right: 20px;
}
.ul{
    margin: 0px ;
    padding: 0px
}
.search .el-input,
.el-select {
    height: 30px;
}


.mt-4 {
    margin-left: 35%;
}

</style>